<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 18134216985
  Date: 2024-04-23
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        <li class="layui-this">水费</li>
        <li>电费</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <%--条件查询--%>
            <div class="layui-collapse">
                <div class="layui-colla-item">

                    <h2 class="layui-colla-title">查询条件</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                            <div class="layui-inline">
                                <input type="datetime-local" name="epaytime" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <select name="plotid" id="">
                                    <option value="0">请选择小区</option>
                                </select>
                            </div>
                            <input type="hidden" name="paytime">
                            <div class="layui-inline">
                                <button class="layui-btn" onclick="search()" >查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%--头部工具栏，添加--%>
            <script type="text/html" id="headTool">
                <button class="layui-btn" onclick="wateradd()">添加缴费</button>
            </script>

            <div id="wateradd" style="display:none;padding:20px">

                <form class="layui-form" id="wateraddForm" lay-filter="wateraddForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">小区：</label>
                        <div class="layui-input-block">
                            <select lay-filter="plotselected" name="plotid" id="plotid">
                                <option value="0">请选择小区</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上期度数:</label>
                        <div class="layui-input-block">
                            <input type="text" name="up" disabled="disabled" required value="0"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="width:350px">
                        <label class="layui-form-label">单价:</label>
                        <div class="layui-input-block" style="width: 200px">
                            <input type="text" name="oneprice" disabled="disabled" required  class="layui-input">
                        </div>
                        <span style="margin-top: -29px;margin-left: 317px;position: absolute">元/吨</span>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">本期度数:</label>
                        <div class="layui-input-block">
                            <input type="text" name="now" required  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付金额:</label>
                        <div class="layui-input-block">
                            <input type="text" disabled="disabled" name="paymoney" required  class="layui-input">
                        </div>
                    </div>
                    <input type="hidden" name="itemid">
                </form>
            </div>
            <table class="layui-hide" id="ID-watertable-demo-data" lay-filter="waterRecordingTable"></table>
            <script>
                let $=layui.$;
                $.get("/property/plot/show").then(({data})=>{
                    $(data).each(function (i,e){
                        let option =$("<option value='"+e.id+"'>"+e.plotname+"</option>")
                        $("[name=plotid]").append(option);
                    })
                    layui.form.render('select');
                })
                $.get("/property/plot/show").then(({data})=>{
                    $(data).each(function (i,e){
                        let option =$("<option value='"+e.id+"'>"+e.plotname+"</option>")
                        $("[name=eplotid]").append(option);
                    })
                    layui.form.render('select');
                })
                let table = layui.table;
                layui.use(["table","laydate"],function (){
                    table.render({
                        id:'waterRecording',
                        elem:'#ID-watertable-demo-data',
                        url:"/tempPay/selectAllWaterRecording",
                        page:true,
                        toolbar:"#headTool",
                        cols:[[
                            {field:'number',align: 'center',type:'numbers',title:"编号"},
                            {field:'id',align: 'center',hide:true,title:"序号"},
                            {align: 'center',field: 'plotid',title: '小区',templet(d){
                                    return d.plot==null?"-":d.plot.plotname
                                }},
                            {align: 'center',field: 'itemid',title: '缴费类型',templet(d) {
                                    return d.item==null?"-":d.item.itemname;
                                }},
                            {align: 'center',field: 'up',title: '上期度数'},
                            {align: 'center',field: 'now',title: '本期度数'},
                            {align: 'center',field: 'paymoney',title: '支付金额'},
                            {align: 'center',field: 'paytime',title: '缴费时间'},
                        ]]
                    })
                })

                //点击查询
                function search(){
                    var time = $("[name=epaytime]").val();
                    var replace = time.replace("T"," ");
                    $("[name=paytime]").val(replace);
                    var search=layui.form.val('searchForm');
                    layui.table.reload('waterRecording', {
                        page: {
                            curr:1
                        },
                        where: search
                    });
                }
                let form=layui.form;
                form.on('select(plotselected)',function (data){
                    $.get("/Repairquotation/selectMaxIdHydrop?plotid="+data.value).then(({data})=>{
                        if(data.now==null){
                            $("[name=up]").val(0);
                        }
                        $("[name=up]").val(data.now);
                    })
                })
                $(document).ready(function() {
                    $("[name=now]").blur(function() {
                        let oneprice=$("[name=oneprice]").val();
                        let now=$("[name=now]").val();
                        let up=$("[name=up]").val();
                        $("[name=paymoney]").val(oneprice*(now-up));
                        let paymoney=$("[name=paymoney]").val();
                        if(paymoney<=0){
                            layui.layer.msg("请填写正确信息")
                            return;
                        }
                    });
                });
                function wateradd(){
                    $.get("/tempPay/selectItemById?id="+5).then(({data})=>{
                        $("[name=oneprice]").val(data.oneprice)
                        $("[name=itemid]").val(data.id)
                    })
                    $("#wateraddForm")[0].reset();
                    layui.layer.open({
                        type:1,
                        title:"水费缴费",
                        area:["500px","450px"],
                        content:$("#wateradd"),
                        btn:["确定","取消"],
                        yes(){
                            let data=layui.form.val("wateraddForm")
                            if(data.now==null ||data.now=="" ||data.now==0){
                                layui.layer.msg("请填写基本信息")
                                return;
                            }else if(data.plotid==0){
                                layui.layer.msg("请选择小区")
                                return;
                            }else {
                                $.post("/Repairquotation/addHyPowerWater",data).then(({msg})=>{
                                    layui.layer.close(layui.layer.index);
                                    layui.layer.msg(msg);
                                    layui.table.reload('waterRecording');
                                    layui.layer.closeAll(layui.layer.index)
                                })
                            }

                        }
                    })
                }

            </script>
        </div>
        <div class="layui-tab-item">
            <%--条件查询--%>
            <div class="layui-collapse">
                <div class="layui-colla-item">

                    <h2 class="layui-colla-title">查询条件</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form"  id="esearchForm" lay-filter="esearchForm">
                            <div class="layui-inline">
                                <input type="datetime-local" name="paytimes" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <select name="eplotid">
                                    <option value="0">请选择小区</option>
                                </select>
                            </div>
                            <input type="hidden" name="epaytime">
                            <div class="layui-inline">
                                <button class="layui-btn" onclick="esearch()" >查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%--头部工具栏，添加--%>
            <script type="text/html" id="eheadTool">
                <button class="layui-btn" onclick="eadd()">添加缴费</button>
            </script>

            <div id="eadd" style="display:none;padding:20px">

                <form class="layui-form" id="eaddForm" lay-filter="eaddForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">小区：</label>
                        <div class="layui-input-block">
                            <select name="eplotid" lay-filter="eplotselected">
                                <option value="0">请选择小区</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上期度数:</label>
                        <div class="layui-input-block">
                            <input type="text" name="eup" disabled="disabled" required value="0"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="width:350px">
                        <label class="layui-form-label">单价:</label>
                        <div class="layui-input-block" style="width: 200px">
                            <input type="text" name="eoneprice" disabled="disabled" required  class="layui-input">
                        </div>
                        <span style="margin-top: -29px;margin-left: 317px;position: absolute">元/度</span>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">本期度数:</label>
                        <div class="layui-input-block">
                            <input type="text" name="enow" required  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付金额:</label>
                        <div class="layui-input-block">
                            <input type="text"disabled="disabled" name="epaymoney" required  class="layui-input">
                        </div>
                    </div>
                    <input type="hidden" name="eitemid">
                </form>
            </div>
            <table class="layui-hide" id="ID-etable-demo-data" lay-filter="eRecordingTable"></table>
            <script>
                layui.use(["table","laydate"],function (){
                    table.render({
                        id:'eRecording',
                        elem:'#ID-etable-demo-data',
                        url:"/tempPay/selectAllEleRecording",
                        page:true,
                        toolbar:"#eheadTool",
                        cols:[[
                            {field:'number',align: 'center',type:'numbers',title:"编号"},
                            {field:'id',align: 'center',hide:true,title:"序号"},
                            {align: 'center',field: 'itemid',title: '缴费类型',templet(d) {
                                    return d.item==null?"-":d.item.itemname;
                                }},
                            {align: 'center',field: 'plotid',title: '小区',templet(d){
                                    return d.plot==null?"-":d.plot.plotname
                                }},
                            {align: 'center',field: 'up',title: '上期度数'},
                            {align: 'center',field: 'now',title: '本期度数'},
                            {align: 'center',field: 'paymoney',title: '支付金额'},
                            {align: 'center',field: 'paytime',title: '缴费时间'},
                        ]]
                    })
                })
                //点击查询
                function esearch(){
                    var time = $("[name=paytimes]").val();
                    var replace = time.replace("T"," ");
                    $("[name=epaytime]").val(replace);
                    var search=layui.form.val('esearchForm');
                    layui.table.reload('eRecording', {
                        page: {
                            curr:1
                        },
                        where: search
                    });
                }
                form.on('select(eplotselected)',function (data){
                    console.log(data.value)
                    $.get("/Repairquotation/selectMaxe?eplotid="+data.value).then(({data})=>{
                        console.log(data)
                        if(data.enow==null){
                            $("[name=eup]").val(0);
                        }
                        $("[name=eup]").val(data.now);
                    })
                })
                $(document).ready(function () {

                    $("[name=enow]").blur(function () {
                        let oneprice = $("[name=eoneprice]").val();
                        let now = $("[name=enow]").val();
                        let up = $("[name=eup]").val();
                        $("[name=epaymoney]").val(oneprice * (now - up));
                        let paymoney = $("[name=epaymoney]").val();
                        if (paymoney <= 0) {
                            layui.layer.msg("请填写正确信息")
                            return;
                        }
                    });
                });

                function eadd() {

                    $.get("/tempPay/selectItemById?id=" + 6).then(({data}) => {

                        $("[name=eoneprice]").val(data.oneprice)
                        $("[name=eitemid]").val(data.id)
                    })
                    $("#eaddForm")[0].reset();
                    layui.layer.open({
                        type: 1,
                        title: "添加",
                        area: ["500px", "450px"],
                        content: $("#eadd"),
                        btn: ["确定", "取消"],
                        yes() {
                            let data = layui.form.val("eaddForm")
                            $.post("/Repairquotation/addHyPowere", data).then(({msg}) => {
                                layui.layer.closeAll();
                                layui.layer.msg(msg);
                                layui.table.reload('eRecording');
                            })
                        }
                    })
                }


            </script>
        </div>
    </div>
</div>
</body>
</html>
